<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="xmb" uri="http://xmb.suishoupai.com/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>分类列表</title>
    <jsp:include page="common/common_css.jsp"/>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<div class="ui main container">
    <jsp:include page="common/message.jsp"/>
    <button class="ui right floated basic button JS-add ${fn:length(categoryList.list) >=20?'disabled':''}">
        <i class="add circle icon"></i>
        新增分类(${categoryList.total}/20)
    </button>
    <!--分类列表数据-->
    <table class="ui celled padded table">
        <thead>
        <tr>
            <th class="center aligned">id</th>
            <th class="center aligned">分类名</th>
            <th class="center aligned">时间</th>
            <th class="center aligned">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:choose>
            <c:when test="${fn:length(categoryList.list) > 0}">
                <c:forEach items="${categoryList.list}" var="category">
                    <tr data-id="${category.id}">
                        <td class="center aligned">${category.id}</td>
                        <td class="center aligned">${category.name}</td>
                        <td class="center aligned"><xmb:formatDate value="${category.createTime}"/></td>
                        <td class="center aligned">
                            <button class="ui basic button JS-edit">
                                <i class="edit icon"></i>
                                修改
                            </button>
                            <button class="ui basic button JS-del">
                                <i class="remove icon"></i>
                                删除
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <tr>
                    <td class="center aligned" colspan="4">没有一个分类，<a href="" class="JS-add">点击添加</a></td>
                </tr>
            </c:otherwise>
        </c:choose>
        </tbody>
        <tfoot>
        <tr>
            <th colspan="4" class="center aligned">
                <c:set var="pagination" scope="session" value="${categoryList}"/>
                <c:set var="paginationAction" scope="session" value="sale/category"/>
                <jsp:include page="common/page.jsp"/>
            </th>
        </tr>
        </tfoot>
    </table>
</div>

<div id="JS-modal-input" class="ui basic modal">
    <div class="content" style="text-align: center;">
        <div style="background-color: white;display: inline-block;padding: 20px 60px;border-radius: 5px;">
            <div class="header" style="display: inline-block;color: black;margin-bottom: 20px;">
            </div>
            <br>
            <div class="ui input mini" style="margin-bottom: 20px;">
                <input type="text" placeholder="在这里输入分类名" maxlength="10">
            </div>
            <br>
            <div class="actions">
                <div class="ui small primary blue column approve button" style="display: inline-block;">
                    OK
                </div>
                <div class="ui small primary blue column cancel button"
                     style="display: inline-block;margin-left: 30px;">Cancel
                </div>
            </div>
        </div>
    </div>
</div>

<!--确认弹窗-->
<div id="JS-modal-confirm" class="ui basic modal">
    <div class="content" style="text-align: center;">
        <div style="background-color: white;display: inline-block;padding: 20px 60px;border-radius: 5px;">
            <div id="JS-modal-confirm-title" style="display: inline-block;color: black;margin-bottom: 50px;">
            </div>
            <br>
            <div class="actions">
                <div class="ui small primary blue column approve button" style="display: inline-block;">
                    OK
                </div>
                <div class="ui small primary blue column cancel button"
                     style="display: inline-block;margin-left: 30px;">Cancel
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="common/footer.jsp"/>
<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        $('.JS-add').click(function () {
            $('#JS-modal-input .header').text("新增分类");
            $('#JS-modal-input input').val("");
            $('#JS-modal-input').modal({
                allowMultiple: true, observeChanges: true,
                onApprove: function () {
                    var name = $('#JS-modal-input input').val();
                    if (name === '') {
                        alert("请输入分类名。");
                        return false;
                    }
                    if ($('#JS-modal-input .actions .approve.button').hasClass('loading')) {
                        return false;
                    }
                    $('#JS-modal-input .actions .approve.button').addClass('loading');
                    common.ajax({
                        url: ROOT + "/sale/category",
                        data: {
                            name: name
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            window.location.reload();
                        },
                        complete: function () {
                            $('#JS-modal-input .actions .approve.button').removeClass('loading');
                        }
                    });
                    return false;
                },
                onDeny: function () {
                    return !$('#JS-modal-input .actions .approve.button').hasClass('loading');
                }
            }).modal("show");
            return false;
        });
        $('.JS-edit').click(function () {
            var id = $(this).parent().parent().data("id");
            var categoryNameDom = $(this).parent().prev().prev();
            var name = categoryNameDom.text();
            $('#JS-modal-input .header').text("修改分类'" + id + "'");
            $('#JS-modal-input input').val(name);
            $('#JS-modal-input').modal({
                allowMultiple: true, observeChanges: true,
                onApprove: function () {
                    var name = $('#JS-modal-input input').val();
                    if (name === '') {
                        alert("请输入分类名。");
                        return false;
                    }
                    if ($('#JS-modal-input .actions .approve.button').hasClass('loading')) {
                        return false;
                    }
                    $('#JS-modal-input .actions .approve.button').addClass('loading');
                    common.ajax({
                        url: ROOT + "/sale/category/" + id,
                        data: {
                            name: name
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            categoryNameDom.text(name);
                            $('#JS-modal-input').modal('hide');
                        },
                        complete: function () {
                            $('#JS-modal-input .actions .approve.button').removeClass('loading');
                        }
                    });
                    return false;
                },
                onDeny: function () {
                    return !$('#JS-modal-input .actions .approve.button').hasClass('loading');
                }
            }).modal("show");
        });
        $('.JS-del').click(function () {
            var id = $(this).parent().parent().data("id");
            var name=$(this).parent().prev().prev().text();
            $('#JS-modal-confirm-title').text("确定删除分类'"+name+"'？");
            $('#JS-modal-confirm').modal({
                allowMultiple: true, observeChanges: true,
                onApprove: function () {
                    if ($('#JS-modal-confirm .actions .approve.button').hasClass('loading')) {
                        return false;
                    }
                    $('#JS-modal-confirm .actions .approve.button').addClass('loading');
                    common.ajax({
                        url: ROOT + "/sale/category/" + id+"/delete",
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            window.location.reload();
                        },
                        complete: function () {
                            $('#JS-modal-confirm .actions .approve.button').removeClass('loading');
                        }
                    });
                    return false;
                },
                onDeny: function () {
                    return !$('#JS-modal-confirm .actions .approve.button').hasClass('loading');
                }
            }).modal("show");
        });
    });
</script>
</body>
</html>
